<!-- *@description:  -->
<!-- *@Author: Platina -->
<!-- *@Date: 2025-07-11 10:20:01 -->
<template>
    <div class="Equipment">
        <div class="EquipmentTitle">
            <div class="backG"></div>
            <div class="fwb zindex999 ml23">设备资源</div>
        </div>
        <div class="EquipmentContent">
            <div class="UAV">
                <img src="/EquipmentResources/UAV.png" class="CommonImg">
                <div class="UAVContent flexBetween">
                    <div class="flexBetween secondTitle">
                        <div class="backG"></div>
                        <div class="f18 flexCenter h100 ml15">无人机</div>
                        <div class="f18 flexCenter h100">
                            <div class="f16 h100 flexCenter">总数&nbsp;</div>
                            <div class=" h100 flexCenter" style="color: #1195E9;">975台</div>
                        </div>
                    </div>
                    <div class="flexBetween comment">
                        <div class="contentComent h100">
                            <div>在线</div>
                            <div>414</div>
                        </div>
                        <div class="contentComent h100">
                            <div>离线</div>
                            <div>246</div>
                        </div>
                        <div class="contentComent h100">
                            <div>维护</div>
                            <div>178</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Dock">
                <img src="/EquipmentResources/Dock.png" class="CommonImg">
                <div class="DockContent flexBetween">
                    <div class="flexBetween secondTitle">
                        <div class="backG"></div>
                        <div class="f18 flexCenter h100 ml15">机场</div>
                        <div class="f18 flexCenter h100">
                            <div class="f16 h100 flexCenter">总数&nbsp;</div>
                            <div class=" h100 flexCenter" style="color: #5ADC65;">975台</div>
                        </div>
                    </div>
                    <div class="flexBetween comment">
                        <div class="contentComent h100">
                            <div>在线</div>
                            <div>414</div>
                        </div>
                        <div class="contentComent h100">
                            <div>离线</div>
                            <div>246</div>
                        </div>
                        <div class="contentComent h100">
                            <div>维护</div>
                            <div>178</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { } from "vue";
</script>

<style lang="scss" scoped>
.Equipment {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .ml15 {
        margin-left: 15px;
    }

    .ml23 {
        margin-left: 23px;
    }

    .mr10 {
        margin-right: 10px;
    }

    .h100 {
        height: 100%;
    }

    .w100 {
        width: 100%;
    }

    .f12 {
        font-size: 12px;
    }

    .f14 {
        font-size: 14px;
    }

    .f16 {
        font-size: 16px;
    }

    .f18 {
        font-size: 18px;
    }

    .f20 {
        font-size: 20px;
    }

    .f24 {
        font-size: 24px;
    }

    .fwb {
        font-weight: bold;
    }

    .zindex999 {
        z-index: 999;
    }

    .CommonImg {
        height: 100%;
    }

    .flexCenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flexBetween {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .EquipmentTitle {
        height: 40px;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: start;
        margin: 0 33px;
        font-size: 24px;
        color: #fff;

        .backG {
            width: 95%;
            height: 70px;
            position: absolute;
            background: url("@/assets/secondTitle/bg.svg") no-repeat center center;
            background-size: cover;
            background-size: 100% 100%;
            left: -20px;
            z-index: 9;
        }
    }

    .EquipmentContent {
        flex: 1;
        padding: 20px 40px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .UAV {
            width: 100%;
            height: 90px;
            display: flex;

            .UAVContent {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;

                .secondTitle {
                    width: 100%;
                    height: 30px;
                    color: #fff;
                    position: relative;

                    .backG {

                        width: 130%;
                        height: 20px;
                        position: absolute;
                        background: url("@/assets/border/line.svg") no-repeat center center;
                        background-size: cover;
                        background-size: 100% 110%;
                        top: -5px;
                        left: -45px;
                    }

                }

                .comment {
                    width: 100%;
                    height: 46px;

                    .contentComent {
                        width: 60px;
                        color: #fff;
                        display: flex;
                        flex-direction: column;
                        text-align: center;
                    }
                }
            }
        }

        .Dock {
            width: 100%;
            height: 90px;
            display: flex;

            .DockContent {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;

                .secondTitle {
                    width: 100%;
                    height: 30px;
                    color: #fff;
                    position: relative;

                    .backG {
                        width: 130%;
                        height: 20px;
                        position: absolute;
                        background: url("@/assets/border/line2.svg") no-repeat center center;
                        background-size: cover;
                        background-size: 100% 110%;
                        top: -5px;
                        left: -45px;
                    }

                }

                .comment {
                    width: 100%;
                    height: 46px;

                    .contentComent {
                        width: 60px;
                        color: #fff;
                        display: flex;
                        flex-direction: column;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
